<template>
  <div  class="pro_info">      
    <el-table :data="tableData" style="width:50% ;hight:300px; text-align:center" @row-click="handleRead"  :row-class-name="tableRowClassName" border>
      <el-table-column align="center"
        v-for="(item, i) in tableCol"
        :key="i"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
       
      ></el-table-column>
    </el-table>
  </div>
</template>

<script  setup lang="ts" name="form">
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";
const route = useRoute();
const router = useRouter();

const handleRead = (row:any) => {
  router.push({
    name: "company",
    query: {
     id:row.id,
     state:row.state,
     cq:1
    },
  });
};

     const  tableData =reactive([
        { id:"1",name: "电厂3" , code: "1号", status: "关门"},
        { id:"2",name: "电厂3", code:  "2号", status: "关门"},
        { id:"3",name: "电厂3" , code:  "3号", status: "关门"},
        { id:"4",name: "电厂3", code:  "4号", status: "关门"},
        { id:"5",name: "电厂3" , code:  "5号", status: "关门"},
        { id:"6",name: "电厂3", code:  "6号", status: "关门"},
        { id:"7",name: "电厂3" , code:  "7号", status: "关门"},
        { id:"8",name: "电厂3", code:  "8号", status: "开门"},
        { id:"9",name: "电厂3" , code:  "9号", status: "关门"},
        { id:"10",name: "电厂3", code:  "10号", status: "关门"},
        { id:"11",name: "电厂3" , code:  "11号", status: "关门"},
        { id:"12",name: "电厂3", code:  "12号", status: "开门"},
       
        

      ]) 

  


      const tableCol = reactive([

        // { prop: "id", label: "id", width: 80 },
        { prop: "name", label: "厂区", width: 180 },
        { prop: "code", label: "设备名称", width: 200 },
        { prop: "status", label: "设备状态" },
       
      ])
      const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  console.log(row.status)
   if (row.status === '开门') {
    return 'warning-row'
   } 
   return ''
}

</script>
<style lang="css" scoped>
.pro_info {
 text-align: center;
}
::v-deep.el-table .warning-row {
  width: 100%; 
  text-align: center;
  --el-table-tr-bg-color: var(--el-color-error-light-3);
  
  /* pointer-events:none; */
}
</style>